<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">

    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/layout.css" />
</head>

<body>
    <h1>CSS 布局 </h1>

    <h2>显示</h2>
    <ul>
        <li><a target="_blank" href="./attr/display.html">CSS display 属性</a></li>
    </ul>

    <h2>尺寸</h2>
    <ul>
        <li><a target="_blank" href="./attr/width.html">CSS width 属性</a></li>
        <li><a target="_blank" href="./attr/height.html">CSS height 属性</a></li>
    </ul>

    <h2>框模型</h2>

    <h3>参考链接</h3>
    <ul>
        <li><a target="_blank" href="./attr/padding.html">CSS 内边距</a></li>
        <li><a target="_blank" href="./attr/margin.html">CSS 外边距</a></li>
        <li><a target="_blank" href="./attr/margin.html#margin_collapsing">CSS 外边距合并</a></li>
        <li><a target="_blank" href="./attr/border.html">CSS 边框</a></li>
    </ul>


    <h3>示例</h3>
    <div id="box_container">
        <div id="box">
            <div id="content"></div>
        </div>
    </div>

    <pre>
&lt;div id=&quot;box_container&quot;&gt;
    &lt;div id=&quot;box&quot;&gt;
        &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

#box_container {
    width: 100px;
    height: 100px;
    background-color: blue;
    overflow: auto;
}

#box {
    padding: 10px;
    margin: 10px;
    border: solid 10px red;
    background-color: yellow;
}

#content {
    width: 40px;
    height: 40px;
    background-color: green;
}
    </pre>

    <p>其中:</p>
    <ul>
        <li><font style="color: blue; background-color: #aaaaaa;">蓝色</font>为外边距</li>
        <li><font style="color: red;  background-color: #aaaaaa;">红色</font>为边框</li>
        <li><font style="color: yellow;  background-color: #aaaaaa;">黄色</font>为内边距</li>
        <li><font style="color: green;  background-color: #aaaaaa;">绿色</font>为内容</li>
    </ul>


    <h2>定位</h2>
    <ul>
        <li><a target="_blank" href="./attr/position.html">CSS 定位 (Positioning)</a></li>
        <li><a target="_blank" href="./attr/zindex.html">CSS z-index 属性</a></li>
    </ul>

    <h2>位移</h2>

    <ul>
        <li><a target="_blank" href="./attr/left.html">CSS left 属性</a></li>
        <li><a target="_blank" href="./attr/top.html">CSS top 属性</a></li>
        <li><a target="_blank" href="./attr/right.html">CSS right 属性</a></li>
        <li><a target="_blank" href="./attr/bottom.html">CSS bottom 属性</a></li>
    </ul>


    
    <h2>内容溢出</h2>

    <ul>
        <li><a target="_blank" href="./attr/overflow.html">CSS 布局 - Overflow</a></li>
    </ul>

    
    <h2>浮动</h2>


    <ul>
        <li><a target="_blank" href="./attr/float.html">CSS Float(浮动)</a></li>
    </ul>


    <h2>对齐</h2>
    <ul>
        <li><a target="_blank" href="./alignment.html">CSS对齐</a></li>
    </ul>



    <h2>布局框架</h2>
    <ul>
        <li><a target="_blank" href="./flex.html">Flex布局</a></li>
        <li><a target="_blank" href="./grid.html">Grid布局</a></li>
    </ul>

</body>

</html>